@media (min-width: 401px)    
  .lv-controls,
  .rp-controls
    --lv-controls-left 2
    --lv-controls-right 3

@media (max-width: 800px)
  .lv-player,
  .ractive-player
    --lv-controls-height 36px

@media (max-width: 400px)
  .lv-player,
  .ractive-player
    --lv-controls-height 30px
    
  .lv-controls,
  .rp-controls
    --lv-controls-left 2
    --lv-controls-right 2
    
  .lv-controls-settings,
  .rp-controls-settings
    display none

@media (any-hover: none)
  .lv-controls,
  .rp-controls
    color #FFF
    height var(--lv-controls-height)
    position absolute
    top unset
    transition opacity .25s cubic-bezier(0.0,0.0,0.2,1)
    width var(--lv-width)
    bottom calc((100% - var(--lv-height)) / 2)
    user-select none
    z-index 1000
    left calc((100% - var(--lv-width)) / 2)
    
  // hide certain controls
  .lv-controls-volume,
  .rp-controls-volume
    display none !important
  
  // time
  .lv-controls-time,
  .rp-controls-time
    line-height unset

  .lv-current-time, .lv-total-time,
  .rp-current-time, .rp-total-time
    height var(--lv-buttons-height)
    line-height var(--lv-buttons-height)
    position absolute
    top 0
    width var(--lv-buttons-height)
    
  .lv-current-time,
  .rp-current-time
    left 0
    text-align right
    
  .lv-total-time,
  .rp-total-time
    right calc((var(--lv-controls-right) - 1) * var(--lv-buttons-height))
    text-align left

  .lv-time-separator,
  .rp-time-separator
    display none
    
  .lv-controls-scrub-wrap,
  .rp-controls-scrub-wrap
    position relative
    
    &::after
      content ""
      position absolute
      top calc(var(--lv-buttons-height) * (0.075 / 0.55 - 0.5))
      bottom calc(var(--lv-buttons-height) * (0.075 / 0.55 - 0.5))
      left 0
      right 0
    
  .lv-controls-scrub,
  .rp-controls-scrub
    height calc(7.5% / 0.55)
    top unset
    top calc(50% - 0.5 * (7.5% / 0.55))
    width calc(100% - (var(--lv-controls-left) + var(--lv-controls-right)) * var(--lv-buttons-height) - 7px)
    left calc(var(--lv-controls-left) * var(--lv-buttons-height))
    margin unset
    
  .lv-scrubber,
  .rp-scrubber
    height 216%
    top -50%
    pointer-events all
    
  .lv-controls-playpause,
  .rp-controls-playpause
    cursor pointer
    pointer-events all

    position absolute
    left var(--lv-buttons-height)
    top 0
    width var(--lv-buttons-height)

  .lv-controls-right,
  .rp-controls-right
    float unset
    position absolute
    right 0
    top 0
    
    > *
      width var(--lv-buttons-height)
